﻿@{
    ViewBag.Title = "DraggExample";
    string NewClass = null;
}

<h2>DraggExample</h2>
<style>
    #cosa {
        height:200px;
        width:200px;
        background-color:red;
    }

</style>

<div id="cosa" class="@NewClass"></div>
@Scripts.Render("~/bundles/jquery")
 
@section scripts{
    
    <script src="~/Scripts/jquery.signalR-1.1.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
    <script src="~/signalr/hubs"></script>

    <script>

        $(function () {
            
            var dragging = $.connection.dragHub;
            var shape = $('#cosa');
            var x, y = 0;
            dragging.client.moveShape = function (x, y) {
                shape.css({ left: x, top: y });
            };
            $.connection.hub.start().done(function () {
                shape.draggable({
                    drag: function () {
                        var position = shape.offset();
                       
                        dragging.server.move(this.offsetLeft, this.offsetTop || 0);
                    }
                });
            });
        });
    </script>

}